<template>
  <div id="app">
    <!-- 联系人卡片 -->
    <van-contact-card
      :type="cardType"
      :name="currentContact.name"
      :tel="currentContact.tel"
      @click="showList = true"
    />

    <!-- 联系人列表 -->
    <van-popup v-model="showList" position="bottom">
      <van-contact-list
        v-model="chosenContactId"
        :list="list"
        @add="onAdd"
        @edit="onEdit"
        @select="onSelect"
      />
    </van-popup>

    <!-- 联系人编辑 -->
    <van-popup v-model="showEdit" position="bottom">
      <van-contact-edit
        :contact-info="editingContact"
        :is-edit="isEdit"
        @save="onSave"
        @delete="onDelete"
      />
    </van-popup>
  </div>
</template>

<script>

  /*1. 分析计算属性 及其 依赖
  *
  *   cardType
  *       chosenContactId
  *   currentContact
  *       chosenContactId
  *       list
  * */

  import { ContactCard, ContactList, ContactEdit,Popup  } from 'vant';
  export default {
    name: 'App',
    components:{
      [ContactCard.name]:ContactCard,
      [ContactList.name]:ContactList,
      [ContactEdit.name]:ContactEdit,
      [Popup.name]:Popup
    },
    data() {
      return {
        chosenContactId: null,//控制cardList中哪一个联系人应该被选中
        editingContact: {},//代表被编辑的联系人的信息
        showList: false, //控制cardList能否显示
        showEdit: false, //控制cardEdit能否显示
        isEdit: false,  //控制编辑页要不要显示删除按钮
        list: [
          {
            name: '张三',
            tel: '13000000000',
            id: 0,
          },
        ], //联系人数组
      };
    },
    computed: {
      cardType() {
        return this.chosenContactId !== null ? 'edit' : 'add';
      }, //控制card组件处于何种模式 : add edit

      currentContact() {
        const id = this.chosenContactId;
        return id !== null ? this.list.filter((item) => item.id === id)[0] : {};
      }, //控制了当card处于edit模式时 需要回显的信息
    },
    methods: {
      // 添加联系人
      onAdd() {
        //代表新增一个联系人;为当前这个联系人分配了一个id
        this.editingContact = { id: this.list.length };
        //确定新增逻辑 肯定不会出现删除按钮
        this.isEdit = false;
        //将编辑页显示出来
        this.showEdit = true;
      },

      // 编辑联系人
      onEdit(item) {
        this.isEdit = true;
        this.showEdit = true;
        this.editingContact = item;
      },

      // 选中联系人
      onSelect() {
        this.showList = false;
      },

      // 保存联系人
      onSave(info) {
        //将list edit页全部关掉
        this.showEdit = false;
        this.showList = false;

        if (this.isEdit) {
          //编辑的逻辑
          this.list = this.list.map((item) =>
            item.id === info.id ? info : item
          );
        } else {
          //新增的逻辑
          this.list.push(info);
        }

        //将新增的那个联系人 作为 选中的那一个
        this.chosenContactId = info.id;
      },

      // 删除联系人
      onDelete(info) {
        this.showEdit = false;
        this.list = this.list.filter((item) => item.id !== info.id);
        if (this.chosenContactId === info.id) {
          this.chosenContactId = null;
        }
      },
    },
  }
</script>

<style scoped>

</style>
